<template>
    <!-- 轮播图区域 -->
    <div>
      <van-swipe class="header-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="item in bannerList" :key="item.bannerid">
          <img :src="item.img" :alt="item.alt" />
        </van-swipe-item>
      </van-swipe>
    </div>
    <!-- 宫格区域 -->
    <van-grid :column-num="5" :border="false" :clickable="true">
      <van-grid-item
        v-for="item in gridList"
        :key="item.id"
        :icon="item.url"
        :text="item.text"
      />
    </van-grid>
    <!-- 秒杀区域 -->
    <van-count-down :time="countDown">
      <template #default="timeData">
        <span>{{ countDownContent.content }}</span>
        <span>{{ countDownContent.time }}</span>
        <span class="block">{{ timeData.hours }}</span>
        <span class="colon">:</span>
        <span class="block">{{ timeData.minutes }}</span>
        <span class="colon">:</span>
        <span class="block">{{ timeData.seconds }}</span>
      </template>
    </van-count-down>
    <!-- 秒杀商品列表 -->
    <div class="skill-list">
      <div class="skill-item" v-for="item in apiSeckillList" :key="item.proid">
        <img :src="item.img1" alt="" class="item-img" />
        <p class="item-price">￥{{ item.originprice }}</p>
      </div>
    </div>
    <!-- 商品列表 -->
    <van-pull-refresh
      class="goods-refresh"
      v-model="refreshLoading"
      @refresh="onRefresh"
    >
      <div class="goods-list">
        <van-list
          v-model:loading="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
          class="goods-item"
        >
          <van-cell
            v-for="item in productList"
            :key="item.proid"
            @click="goToDetail(item.proid)"
          >
            <div class="item-imgbox">
              <img :src="item.img1" alt="" />
            </div>
            <div>
              <p>{{ item.proname }}</p>
              <p>￥{{ item.originprice }}</p>
            </div>
          </van-cell>
        </van-list>
      </div>
    </van-pull-refresh>
    <van-cell  />
<van-back-top right="10px" bottom="60px" />
  </template>
  
  <script setup lang="ts">
  import {
    useSwiper,
    useGridList,
    useSeckillList,
    useProductList,
  } from "@/hooks/HomeViewHook";
  
  const { bannerList } = useSwiper();
  const { gridList } = useGridList();
  const { countDown, countDownContent, apiSeckillList } = useSeckillList();
  
  const {
    refreshLoading,
    onRefresh,
    loading,
    finished,
    onLoad,
    productList,
    goToDetail,
  } = useProductList();
  </script>
  
  <style lang="scss" scoped>
  .header-swipe {
    height: 400px;
    .van-swipe-item {
      color: #fff;
      font-size: 20px;
      line-height: 150px;
      text-align: center;
      img {
        width: 100%;
        height: 400px;
      }
    }
  }
  .skill-list {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
    width: 100%;
    .skill-item {
      .item-img {
        width: 100%;
        height: 100px;
      }
      .item-price {
        font-size: 12px;
        margin: 5px auto;
        text-align: center;
        font-weight: bold;
        color: #ee0a24;
      }
    }
  }
  .goods-refresh {
    overflow: inherit;
    .goods-list {
      width: 100%;
      .goods-item {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-evenly;
        width: 100%;
        margin: 10px;
        border-radius: 10px;
        margin: 8px 0;
        overflow: hidden;
        .van-cell {
          width: 48%;
          margin-top: 10px;
        }
        .item-imgbox {
          width: 100%;
          img {
            display: block;
            width: 100%;
          }
        }
      
      }
    }
  }
  
  .colon {
    display: inline-block;
    margin: 0 4px;
    color: #ee0a24;
  }
  .block {
    display: inline-block;
    width: 22px;
    color: #fff;
    font-size: 12px;
    text-align: center;
    background-color: #ee0a24;
  }
  </style>
  